<template>
    <div>
        <!-- 搜索框 -->
        <div class="header">
            <el-form :model="searchForm" inline>
                <el-form-item label="用户名称">
                    <el-input v-model="searchForm.account" placeholder="请输入用户名称进行查询" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button @click="showAddAccount">新增</el-button>
        </div>
        <!-- 列表 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="account" label="用户名" />
            <el-table-column prop="level" label="等级" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button size="small" @click="updateAccount(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteAccount(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增/修改弹框 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle">
            <el-form :model="accountForm" label-width="120px">
                <el-form-item label="用户名称">
                    <el-input v-model="accountForm.account" placeholder="请输入用户名称" />
                </el-form-item>
                <el-form-item label="等级">
                    <el-input v-model="accountForm.level" placeholder="请输入用户等级" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetAccountDialog">取消</el-button>
                    <el-button type="primary" @click="addAccount" v-if="dialogType === dialogTypeMap.add">
                        确认
                    </el-button>
                    <el-button type="primary" @click="updateAccountHandle" v-else>
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance, computed } from 'vue'
import { getDataApi, deleteAccountApi,addAccountApi, updateAccountApi } from '../utils/mockServer/db.js'

const { proxy: _this } = getCurrentInstance()

// 常量定义
const DEFAULTLEVEL = 1
const DIALOGTITLEMAP = {
  0: '新增',
  1: '修改'
}


// 搜索框的数据
const searchForm = ref({
    account: ''
})

// 新增表单
const accountForm = ref({
    account: '',
    level: DEFAULTLEVEL,
    id:0
})

// 列表数据
const tableData = ref([])

// 新增
const dialogVisible = ref(false)

// 弹框类型Map
const dialogTypeMap = ref({
  add: 0,
  modify: 1
})

// 弹框类型Map
const dialogType = ref(dialogTypeMap.value.add)

// 弹框标语
const dialogTitle = computed(() => {
  return DIALOGTITLEMAP[dialogType.value]
})




// 请求全部数据
const getData = (account) => {
    const data = getDataApi({ account })

    tableData.value = data
}

getData()

// 搜索操作
const handleSearch = () => {
    const account = searchForm.value.account
    console.log(account);
    getData(account)
}

// 新增
const showAddAccount = () =>{
    // 显示弹框，并切换弹框类型为新增
    dialogVisible.value = true
    dialogType.value = dialogTypeMap.value.add
}

const addAccount = () =>{
    const {account, level} = accountForm.value
    console.log(account);
    console.log(level);
    const accountObj = {
        account,
        level
    }
    addAccountApi(accountObj)

    _this.$message({
        type:"success",
        message:'添加成功'
    })

    getData()
    resetAccountDialog()
}

const updateAccount = (row) =>{
    console.log('row',row);
    // 显示弹框并切换弹框类型
    dialogVisible.value = true
    dialogType.value = dialogTypeMap.value.modify

    const {account, level,id} = row
    accountForm.value.account = account
    accountForm.value.level = level
    accountForm.value.id = id

}

const updateAccountHandle = ()=>{
    updateAccountApi(accountForm.value)

    _this.$message({
        type:'success',
        message:'更新成功'
    })

    getData()
    resetAccountDialog()
}

// 删除操作
const deleteAccount = (row) => {
    _this.$confirm('是否要删除该账号', '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteAccountApi(row)
        _this.$message({
            type: 'success',
            message: '删除成功',
        })
        getData()
    }).catch(() => {
        _this.$message({
            type: 'ifno',
            message: '取消删除',
        })
    })

}

const resetAccountDialog = ()=>{
    dialogVisible.value = false
    accountForm.value.account = ''
    accountForm.value.level = DEFAULTLEVEL
}
</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
}
</style>